<template>
    <a-breadcrumb separator=">" :routes="routes">
        <template slot="itemRender" slot-scope="{route, params, routes, paths}">
            <span>
                {{route.meta.title}}
            </span>
            <!-- <span v-if="routes.indexOf(route) === routes.length - 1">
                {{route.meta.title}}
            </span>
            <router-link v-else :to="route.path">
                {{route.meta.title}}
            </router-link> -->
        </template>
    </a-breadcrumb>
</template>

<script>
    export default {
        name: 'bread',
        data() {
            return {
                routes: [],
            }
        },
        methods: {
            fetchRoutes: function () {
                this.routes = [];
                let arr = this.$route.matched.filter(item => item.parent);

                let tree = arr[arr.length - 1];
                this.getArrFromTree(tree);
            },
            getArrFromTree(tree) {
                this.routes.unshift(tree);
                if (tree.parent) {
                    this.getArrFromTree(tree.parent)
                } else {
                    let array = [];
                    let newArr = [];
                    for(let i = 0; i < this.routes.length; i++) {
                        if (array.indexOf(this.routes[i].meta.title) === -1) {
                            array.push(this.routes[i].meta.title);
                            newArr.push(this.routes[i])
                        }
                    }
                    this.routes = newArr;
                    return this.routes
                }
            }
        },
        watch:{
            "$route": "fetchRoutes"
        },
        mounted() {
            this.fetchRoutes();
        },
    }
</script>
